import { useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, message, Popconfirm, Space } from 'antd';
import { history } from 'umi';

import type { PaginationProps } from 'antd';
import type { ProColumns, ParamsType, ActionType } from '@ant-design/pro-components';

import { queryResourcesList, deleteResource } from '@/services/resource-management';

const ResourceList: React.FC = () => {
  const actionRef = useRef<ActionType>();

  /**
   * 删除
   * @param id
   */
  const deleteItem = async (id: string) => {
    const res = await deleteResource({ id });
    if (!res.code && res.data) {
      message.success('删除成功');
      actionRef.current?.reload();
    }
  };

  /**
   * table columns
   */
  const columns: ProColumns<API.ResourceItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 48,
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '资源名称',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      // align: 'center',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      ellipsis: true,
      align: 'center',
      valueEnum: {
        1: '菜单',
        2: '按钮',
      },
    },
    {
      title: '状态',
      dataIndex: 'enable',
      key: 'enable',
      ellipsis: true,
      align: 'center',
      valueEnum: {
        0: '禁用',
        1: '正常',
      },
    },
    {
      title: '路由',
      dataIndex: 'route',
      key: 'route',
      ellipsis: true,
      // align: 'center',
      hideInSearch: true,
    },
    {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort',
      ellipsis: true,
      align: 'center',
      hideInSearch: true,
    },

    {
      title: '操作',
      key: 'options',
      hideInSearch: true,
      align: 'center',
      render: (_, row) => {
        return (
          <Space>
            <a key="link" href={`#/system/resource/detail/modify/${row.id}`}>
              编辑
            </a>
            <Popconfirm
              key="delete"
              title="确定要删除此用户?"
              onConfirm={() => deleteItem(row.id)}
              okText="确定"
              cancelText="取消"
              disabled={!row.enable}
            >
              <a href="#">删除</a>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  /**
   * 列表接口
   * @param params
   * @returns
   */
  const getResourceList = async (params: ParamsType) => {
    const { current, ...rest } = params;
    const param: API.ResourceListParam = {
      pageNum: current || 1,
      pageSize: params.pageSize || 10,
      ...rest,
    };
    const res = await queryResourcesList(param);
    if (!res.code && res.data) {
      const { content, totalSize, pageSize, pageNum } = res.data;
      return {
        total: totalSize,
        pageSize,
        current: pageNum,
        data: content,
      };
    }
    return [];
  };
  const showTotal: PaginationProps['showTotal'] = (t) => `共 ${t} 条`;
  return (
    <PageContainer>
      <ProTable<API.ResourceItem>
        actionRef={actionRef}
        columns={columns}
        rowKey="id"
        pagination={{
          showSizeChanger: true,
          size: 'small',
          showTotal,
          showQuickJumper: true,
        }}
        request={getResourceList}
        options={false}
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            type="primary"
            onClick={() => history.push('/system/resource/detail/add')}
          >
            新建
          </Button>,
        ]}
      />
    </PageContainer>
  );
};

export default ResourceList;
